<template>
  <div class="margrinThirty">
    <!-- 第一部分 -->
    <div style="margin-bottom: 10px;">
      <router-link to="">
        <el-button @click="$router.back(-1)" type="primary" size="medium">返回</el-button>
      </router-link>
    </div>
    <div class="contentCss">
      <div class="comboTitle">套餐信息</div>
      <div class="margrinThirty">
        <div><span class="spanTitle">套餐名称：</span>
          <el-input style="width: 20%;" v-model="form.name"></el-input>
        </div>
        <div class="margrinTopTwenty">
          <span class="spanTitle">活动时间：</span>
          <el-radio-group v-model="activeRadio">
            <el-radio :label="0">不限制</el-radio>
            <el-radio :label="1">时间端</el-radio>
          </el-radio-group>

          <span v-if="activeRadio==1" style="margin-left: 20px;">
            <el-date-picker style="width: 400px" v-model="newtime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
              range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
            </el-date-picker>
          </span>
        </div>
        <div class="margrinTopTwenty">
          <span class="spanTitle">活动对象：</span>
          <el-radio v-model="form.activity_group" label="all_user">全部用户</el-radio>
        </div>
        <div class="margrinTopTwenty">
          <span class="spanTitle">套餐状态：</span>
          <el-radio-group v-model="form.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>
    <!-- 第二部分 -->
    <div>
      <div class="contentCss">
        <div class="comboTitle">套餐商品</div>
        <div style="margin: 20px;">
          <el-table :data="comboList" :header-cell-style="{background:'#eef1f6',color:'#606266'}" border style="width: 100%;">
            <el-table-column align="center" type="index" label="序号" />
            <el-table-column align="center" prop="id" label="ID" />
            <el-table-column sortable align="center" prop="thumb_url" label="课程封面">
              <template slot-scope="scope">
                <el-button type="text" size="medium">
                  <img  style="width: 50%;" :src="scope.row.course_info.thumb_url" />
                 <!-- <img v-else style="width: 50%;" :src="scope.row.thumb_url" /> -->
                </el-button>
              </template>
            </el-table-column>
            <el-table-column sortable align="center" prop="course_info.name" label="课程名称">
              <template slot-scope="scope">
                  <div  style="text-align: center;">{{scope.row.course_info.name}}</div>
                <!--  <div v-else style="text-align: center;">{{scope.row.name}}</div> -->
              </template>
            </el-table-column>
            <el-table-column sortable align="center" prop="discount_price" label="套餐售价"/>
            <el-table-column sortable align="center" prop="remain_num" label="剩余数量"/>
            <el-table-column sortable align="center" prop="reduce_amount" label="优惠金额/元" />
            <el-table-column sortable align="center" prop="is_must" label="必买">
              <template slot-scope="scope">
                <span v-if="scope.row.is_must==1">是</span>
                <span v-if="scope.row.is_must==0">否</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="230px">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="updateTitleClick(scope.row,scope.$index)">编辑</el-button>
                <el-button type="danger" size="mini" @click="delTitle(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align: left;">
            <el-button type="text" @click="addTitle">添加套餐</el-button>
          </div>
          <div>
            <!-- 添加题目模态款 -->
            <el-dialog style="text-align: center;font-weight: bold;color: #626365;" :title="title"
              :close-on-click-modal="false" :visible.sync="modelTitle">
              <div class="msgDiv">
                <div>
                  <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="套餐序号" v-show="vshow" style="text-align: left;">
                      <el-input v-model="courseArr.id" style="width: 90%;" placeholder="套餐序号" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="课程名称" style="text-align: left;">
                      <el-select v-model="courseArr.course_id" style="width: 90%;" placeholder="请选择课程" @change="checkCourse(courseArr.course_id)">
                        <el-option v-for="item in courseList" :key="item.id" :label="item.label" :value="item.id" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="课程封面">
                      <div style="text-align: left;display: flex;">
                        <el-upload class="avatar-uploader" :disabled="true" action="#"
                          name='photo' :show-file-list="false">
                          <div v-if="imageUrl" style="cursor: not-allowed;">
                            <img :src="imageUrl" class="avatar">
                          </div>
                          <i v-else style="cursor: not-allowed;" class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                      </div>
                    </el-form-item>
                    <el-form-item label="套餐售价" style="text-align: left;">
                      <el-input-number v-model="courseArr.discount_price" :min="0" controls-position="right"
                        placeholder="套餐售价"></el-input-number>
                    </el-form-item>
                    <el-form-item label="剩余数量" style="text-align: left;">
                      <el-input-number v-model="courseArr.remain_num" :min="0" controls-position="right"
                        placeholder="剩余套餐数量"></el-input-number>
                    </el-form-item>
                    <el-form-item label="是否必买" style="text-align: left;">
                      <el-checkbox v-model="mustChecked">必买</el-checkbox>
                    </el-form-item>
                    <el-button style="text-align: right;" type="success" @click="addTitleSubmit(courseArr)">{{addORupdate}}</el-button>
                  </el-form>

                </div>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
    <!-- 提交 -->
    <div style="text-align: center;margin-bottom: 30px;">
      <el-button type="success" @click="submitAll">提交</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        formdate: [],
        form: {
          id: "",
          name: "",
          start_time: "",
          end_time: "",
          activity_group: "all_user",
          status: 1,
          course_arr: []
        },
        courseArr: {
          id: "",
          course_id: "",
          name: "",
          thumb_url: "",
          is_must: "",
          discount_price: "",
          remain_num:""
        },
        courseList: [], //选择课程用的
        comboList: [],
        activeRadio: 1,
        newtime: "",
        imageUrl: "",
        name: "",
        modelTitle: false,
        vshow: false,
        mustChecked: false,
        title: "",
        addORupdate: "",
        updateid: ""
      }
    },
    created() {
      this.updateid = this.$route.query.id

    },
    mounted() {
      this.getCourseList()
      if (this.updateid > 0) {
        this.updateDetail(this.updateid)
      }
    },
    methods: {
      /* 修改 */
      updateDetail(updateid) {
        this.newtime = []
        this.$api.getPackagesDetail({
          package_id: updateid
        }).then(res => {
          let data = res.data.data
          console.log(data)
          this.form.id = data.id,
            this.form.name = data.name
          if (data.start_time == null && data.end_time == null) {
            this.activeRadio = 0
            this.newtime = []
            this.form.start_time = ""
            this.form.end_time = ""
          } else if (data.start_time != null && data.end_time != null) {
            this.activeRadio = 1
            this.newtime.push(data.start_time)
            this.newtime.push(data.end_time)
            this.form.start_time = data.start_time
            this.form.end_time = data.end_time
          }
          this.form.activity_group = data.activity_group,
            this.form.status = parseInt(data.status),

            this.form.course_arr = data.course_arr
          this.comboList = data.course_arr
          console.log("555")
          console.log(this.comboList)

        })
      },
      /* 全部数据提交到后端*/
      submitAll() {
        console.log("this.comboList")
        console.log(this.comboList)
        if (this.activeRadio == 0) {
          this.newtime = ""
          this.form.start_time = ""
          this.form.end_time = ""
        } else if (this.activeRadio == 1) {
          this.form.start_time = this.newtime[0]
          this.form.end_time = this.newtime[1]
        }
        this.form.course_arr = this.comboList
        console.log(this.form)
        this.$api.setPackages(this.form).then(res => {
          if (res.data.level == "success") {
            this.$message.success(res.data.message)
            setTimeout(() => {
              this.$router.push("/marketingManage/courseCombo")
            }, 500)
          } else {
            this.$message.error(res.data.message)
          }
        })
      },
      checkCourse(id) {
        console.log("kehcengiid=="+id)
        this.courseList.forEach(item => {
          if (id == item.id) {
            this.imageUrl = item.thumb_url
            this.name = item.label
          }
        })
      },
      //添加套餐信息
      addTitleSubmit(courseArr) {
        this.mustChecked == true ? this.courseArr.is_must = 1 : this.courseArr.is_must = 0
        console.log('courseArr=='+typeof(JSON.stringify(courseArr.course_id)) )

        let tempObj = {
          id: courseArr.id,
          course_id: courseArr.course_id,
          is_must: courseArr.is_must,
          discount_price: courseArr.discount_price,
          remain_num:courseArr.remain_num,
          course_info:{
              thumb_url: this.imageUrl,
              name: this.name,
            },
        }
        console.log(tempObj)
        if (this.index == null) {
          /* 添加 */
          this.comboList.push(tempObj)
          console.log(this.comboList)
          this.modelTitle = false
        } else {
          /* 修改 */
          this.comboList.splice(this.index, 1, tempObj)
          console.log("xiugai")
          console.log(this.comboList)
          this.modelTitle = false
        }
      },
      //添加套餐
      addTitle() {
        this.modelTitle = true
        this.title = '添加套餐信息'
        this.addORupdate = "添加",
          this.vshow = false
        this.courseArr.id = 0
        this.courseArr.course_id = ""
        this.courseArr.name = ""
        this.courseArr.is_must = "0"
        this.courseArr.discount_price = ""
        this.courseArr.remain_num = ""
        this.imageUrl = ""
        this.index = null
        this.courseArr.is_must == 1 ? this.mustChecked = true : this.mustChecked = false,
          console.log("添加" + this.mustChecked)
      },
      updateTitleClick(combo, index) {
        console.log("combo")
        console.log(combo)
        this.modelTitle = true
        this.title = '修改套餐信息'
        this.addORupdate = "修改",
          this.vshow = true
        this.courseArr.id = combo.id
        this.courseArr.course_id = parseInt(combo.course_id)
        this.checkCourse( parseInt(combo.course_id))
        this.courseArr.name = combo.name
        this.courseArr.is_must = combo.is_must
        this.courseArr.discount_price = combo.discount_price
        this.courseArr.remain_num = combo.remain_num
        // this.imageUrl = combo.thumb_url
        this.index = index
        combo.is_must == 1 ? this.mustChecked = true : this.mustChecked = false
      },
      //删除套餐目录
      delTitle(index) {
        this.comboList.splice(index, 1)
      },
      getCourseList() {
        let params = {
          page: 1,
          limit: 100000
        }
        this.$api.getCourseList(params).then(res => {
          res.data.data.forEach(item => {
            let option = {
              "id": item.id,
              "label": item.name,
              "thumb_url": item.thumb_url
            }
            this.courseList.push(option)
          })

        })
      }
    }
  }
</script>

<style scoped="scoped">
  /deep/.el-dialog{
    width: 40% !important;
  }
  .margrinThirty {
    margin: 30px;
  }

  .margrinTopTwenty {
    margin-top: 20px;
    height: 40px;
    line-height: 40px;
  }

  .comboTitle {
    font-size: 20px;
    font-weight: bold;
  }

  .spanTitle {
    width: 100px;
    display: inline-block;
    text-align: right;
  }

  .contentCss {
    margin-top: 30px;
    margin-left: 50px;
  }

  /* 图片上传css */
  .avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>
